<template>
  <div class="cart">
    <div class="item">
      <img src="@/assets/gouwuche03.png" class="check-box" alt="">
      <img src="@/assets/gouwuche02.png" class="goods-img" alt="">
      <div class="cons">
        <p class="goods-info">
          <span class="goods-name">Naef Cublex立方体创立方体创立方体创立方体创...</span>
          <img src="@/assets/gouwuche04.png" alt="">
        </p>
        <div class="goods-price">
          <p class="price">¥199.00</p>
          <div class="operate">
            <span><img src="@/assets/gouwuche06.png"></span>
            <span class="pay_num">0</span>
            <span><img src="@/assets/gouwuche07.png"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="@/assets/gouwuche03.png" class="check-box" alt="">
      <img src="@/assets/gouwuche02.png" class="goods-img" alt="">
      <div class="cons">
        <p class="goods-info">
          <span class="goods-name">Naef Cublex立方体创立方体创立方体创立方体创...</span>
          <img src="@/assets/gouwuche04.png" alt="">
        </p>
        <div class="goods-price">
          <p class="price">¥199.00</p>
          <div class="operate">
            <span><img src="@/assets/gouwuche06.png"></span>
            <span class="pay_num">0</span>
            <span><img src="@/assets/gouwuche07.png"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed">
      <div class="left">
        <img src="@/assets/gouwuche03.png" class="check-box" alt="">
        <span class="all-check">全选</span>
        <span>应付: <em>¥199.00</em></span>
      </div>
      <div class="right">去付款</div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
  }
}
</script>
<style lang="stylus" scoped>
.cart
  padding-bottom 5rem
  box-sizing border-box
  .item
    padding 1.5rem
    display flex
    .check-box
      width 1.8rem
      height 1.8rem
      max-width 1.8rem
      margin-right 1rem
      margin-top 2.6rem
    .goods-img
      min-width 9.4rem
      height 7rem
      max-width 9.4rem
      margin-right 1rem
    .cons
      flex 1
      position relative
      .goods-info
        .goods-name
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          font-size 1.5rem
          color #333
          display block
          width calc(100vw - 22rem)
        img
          position absolute
          width 1.4rem
          right 1.5rem
          top .4rem
      .goods-price
        .price
          position absolute
          bottom 0
          color #A81E27
          font-size 1.5rem
          font-weight 500
          line-height 2.5rem
        .operate
          display flex
          flex 1
          position absolute
          right 0
          bottom 0
          span
            display block
            flex 1
            max-width 2.5rem
            max-height 2.5rem
            width 2.5rem
            height 2.5rem
            box-sizing border-box
            border 1px solid #e5e5e5
            text-align center
            line-height 2.5rem
            img
              width 1.1rem
              display inline-block
              vertical-align middle
              position relative
              top -.2rem
          .pay_num
            border none
            text-align center
            width 5rem
            line-height 2.5rem    
            max-width 4.6rem      
            width 4.6rem
            border-top 1px solid #e6e6e6
            border-bottom 1px solid #e6e6e6
            box-sizing border-box
            font-size 1.7rem
            color #313133
            font-weight 500
  .fixed
    position fixed
    bottom 0
    height 5rem
    line-height 5rem
    display flex
    width 100%
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .left
      flex 2
      font-size 1.6rem
      color #333
      .all-check
        margin-right 1.5rem
        margin-left 3.8rem
      img
        position absolute
        left 0
        width 1.8rem
        left 1.5rem
        top 1.6rem
      em
        font-size 1.5rem
    .right
      flex 1
      background-color #19316B
      color #fff
      font-size 1.5rem
      font-weight 500
      text-align center
</style>